<template>
  <ul class="my-main">
    <li class="todo-item" v-for="(todo,index) in todoList" :key="todo.id" @mouseenter="addActiveClass(index)" @mouseleave="removeActiveClass"  :class="{active:currentIndex===index}">
       <div class="left"><input type="checkbox" v-model="todo.isChecked"> <span>{{ todo.name }}</span></div>
       <button type="button" class="layui-btn" @click="deleteTodo(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: "my-main",
  methods:{
    deleteTodo(id){
      if (confirm("确定要删除吗")) {
        this.$store.commit("deleteTodo",id)
      }
    },
    addActiveClass(index){
      this.$store.commit("changeCurrentIndex",index)
    },
    removeActiveClass(){
      this.$store.commit("changeCurrentIndex",-1)

    }
  },
  computed:{
    ...mapState(["todoList","currentIndex"])
  },
  watch:{
    todoList:{
      deep:true,
      handler(newTodoList){
        localStorage.setItem("todoList",JSON.stringify(newTodoList))
      }
    }
  }
}
</script>

<style lang="less" scoped>
.my-main{
  margin-top: 10px;
  .todo-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 10px;
    input{
      cursor: pointer;
    }
  .left{
    display: flex;
    align-items: center;
    span{
      font-size: 18px;
      margin-left: 10px;
    }
  }
  }
  .active{
    background-color: #ccc;
  }
}
</style>